### alp-table 表格集合组件使用方法

通过配置项生成表格集合结构

#### 引入方式

~~~ vue
<template>
  <div class="page">
    <alpTable
      ref="aTable"
      style="margin-left: 10px"
      :formTableConfigs="formTableOption"
      :slotData="slot"
      @topOperate="topOperate"
      @tableOperate="tableOperate"
      @tablePageChange="tablePageChange"
      @onSelectChange="onSelectChange"
      @tableSubmit="tableSubmit"
    >
      <template #userName>
        <a-form-item label="用户名(插槽userName)">
          <a-input v-model:value="slot.userName" placeholder="" />
        </a-form-item>
      </template>
    </alpTable>
  </div>
</template>

<script lang="ts">
//form表单数据
import formConfig from "./formConfig.js";
//按钮图标
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  DeliveredProcedureOutlined,
} from "@ant-design/icons-vue";

import { createVNode, defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  data() {
    return {
      //插槽
      slot: { userName: "" },
      //表格配置项
      formTableOption: {
        //控件标题
        pageTitle: "人员管理",
        //控件模式(default弹窗方式新增，other行内方式新增)
        model: "default",
        // model: "other",
        //是否支持选中
        selected: true,
        //顶部标题与过滤表单是否合并
        topMerge: false,
        //选中类型
        selectedType: "checkbox",
        //唯一标识，及显示名字
        majorKey: "id",
        //顶部form
        topForm: formConfig.topForm,
        //表格行滚动高度
        // tableViewHeight: 500,
        //弹窗及表格数据form数据
        tableRowForm: formConfig.tableRowForm,
        //添加数据模板
        formTemplate: {
        },
        //顶部按钮（icon使用ant的createVNode方法配置,按钮有两种控制diabled,禁用，data当前选中数据,state:控件状态，isShow是否显示，data当前选中数据,state:控件状态）
        topBtnList: [
        ],
        //表格按钮
        tableBtnList: [
         
        ],
        //表格更多下拉菜单
        tableMoreMenuList: [
         
        ],
        //表格数据
        tableData: [],
        //分页数据
        pagination: {
          showTotal: (total) => `共 ${total} 条`,
          total: 1,
          showSizeChanger: true,
          pageSizeOptions: ["10", "20", "30", "50"],
          current: 1,
          pageSize: 10,
        },
        /* 表格岗位表格列（表格若出现数据字典数据，按照以下状态列进行维护type: "select"为select类型数据,
         dictKey: "sys_common_status"为数据字典key,无需单独调用接口获取） */
        columns: [
        ],
      },
    };
  },
  setup() {
    const proxy: any = getCurrentInstance()?.proxy; //获取vue实例上下文
  },
  created() {
    //初始化获取数据
    this.getList();
  },
  /* func为异步执行回调方法，如弹窗关闭需要使用此回调,或者异步修改当前控件状态，进行顶部按钮的控制*/
  methods: {
    // 获取列表
    getList: function (data) {
    },
    //弹窗提交方法（data为填写form数据,type为整个组件状态：select:查询状态，add:新增状态，edit:编辑状态）
    tableSubmit(data, type, func) {
    },
    //分页页面切换（data包含顶部过滤数据:formData，以及分页页码，条数数据:queryParams,用于父组件查询）
    tablePageChange(data, func) {
    },
    //表格选中（data为选中数据）
    onSelectChange(data) {
    },
    //顶部操作按钮方法（data包含顶部过滤数据:formData，选中数据:selectedData,表格列表:table当前点击按钮key:type,根据不同的type可以判断点击的按钮）
    topOperate(data, func) {
     
    },
    //表格操作按钮方法（data包含操作行:row，表格列表:table,当前点击按钮key:type,根据不同的type可以判断点击的按钮，包含更多按钮）
    tableOperate(data, func) {
      
    },
  },
});
</script>

~~~
#### 说明
 此控件有formState属性,存在三种状态,可用于判断按钮是否可以操作(select:查看,add:'新增',edit:'编辑')
~~~
~~~
#### treeConfigs 配置项

|      配置项       | 参数类型 |                                            说明                                            |
| :---------------: | :------: | :----------------------------------------------------------------------------------------: |
|     pageTitle     |  string  |                                          控件标题                                          |
|       model       |  string  |                      控件模式(default弹窗方式新增，other行内方式新增)                      |
|     topMerge      |  boolen  |                                 顶部标题与过滤表单是否合并                                 |
|     selected      |  boolen  |                                      表格是否支持选中                                      |
|     editable      |  boolen  |                                 表格是否支持编辑,默认支持                                  |
|   selectedType    |  number  |                           表格选中类型(单选:radio,多选:checkbox)                           |
|     majorKey      |  string  |                                     表格行唯一标识字段                                     |
|      topForm      |    {}    |                               顶部过滤form配置,与alpForm相同                               |
|  tableViewHeight  |  number  |                                       表格行滚动高度                                       |
|   tableRowForm    |    {}    |                        弹窗模式下,弹窗内新增form配置,与alpForm相同                         |
|   formTemplate    |    {}    |                               新增数据模板(配置新增所需字段)                               |
|    topBtnList     |    []    |                                     顶部自定义按钮列表                                     |
|   tableBtnList    |    []    |                                    表格内自定义按钮列表                                    |
| tableMoreMenuList |    []    |                                 表格内更多下拉菜单按钮列表                                 |
|     tableData     |    []    |                                          表格数据                                          |
|    pagination     |    {}    |                                        表格分页配置                                        |
|      columns      |    []    |                                         表格列配置                                         |
|     slotData      |    {}    | 顶部过滤及弹窗新增form插槽数据(key值不能重复),维护好后可跟随顶部方法及弹窗提交方法一同返回 |
|   uploadConfig    |    {}    |                                          上传配置                                          |
|    radioReset     |  boolen  |                               点击行清空当前选中，默认为true                               |










#### topBtnList.item，tableBtnList.item，tableMoreMenuList.item 按钮列表配置项
~~~js
    {
      key: "add",
      title: "新增",
      icon: createVNode(PlusOutlined),
      disabled: function (data, state) {
        return state !== "edit" && state !== "select";
      },
      noShow: function (data, state) {
        return state !== "edit" && state !== "select";
      },
    },
~~~

|  配置项  | 参数类型 |                                               说明                                                |
| :------: | :------: | :-----------------------------------------------------------------------------------------------: |
|   key    |  string  |                                 右键菜单按钮标识（用于方法回调）                                  |
|  title   |  string  |                                         右键菜单按钮文本                                          |
|  a_attr  |    {}    |                                            ant原生属性                                            |
| disabled | Function | 按钮是否禁用 Function(selectedData, formState),selectedData当前表格选中数据,formState当前组件状态 |
|  noShow  | Function | 按钮是否显示 Function(selectedData, formState),selectedData当前表格选中数据,formState当前组件状态 |
|   icon   | Function |                      举例:createVNode(PlusOutlined),参数为引入的ant原生icon                       |


#### columns.item 表格列配置（支持ant table的columns原生配置）
~~~js
    width: 80,
    key: "state",
    title: "状态",
    editCol: true,
    type: "select",
    slots: { customRender: "state" },
    options: [
      { value: 0, label: "停用" },
      { value: 1, label: "启用" },
    ],
    rule: [
      {
        required: true,
        message: "状态不能为空",
      },
    ],
    //自定义检验规则写法
    //  rule: [
    //   {
    //     message: "不能为空，并且长度不能大于8",
    //     validator: function (value) {
    //       if (value.length < 8 && value) {
    //         return true;
    //       }else{
    //         return false;
    //       }
    //     },
    //   },
    // ],

~~~
| 配置项  | 参数类型 |                                           说明                                           |
| :-----: | :------: | :--------------------------------------------------------------------------------------: |
|  width  |  number  |                                          列宽度                                          |
|   key   |  string  |                                          列标识                                          |
| editCol |  boolen  |                    treeConfigs的model属性为other时，当前列是否可编辑                     |
|  title  |  string  |                                       列头显示文字                                       |
|  type   |  string  |                  treeConfigs的model属性为other时，行内编辑时文本框类型                   |
|  slots  |    {}    |   使用 columns 时，可以通过该属性配置支持 slot 的属性，如 slots: { filterIcon: 'XXX'}    |
| options |    []    |                          当列type属性为select时,可配置选项列表                           |
|  rule   |    []    | treeConfigs的model为other时，行内编辑必填校验  {required: true,message: "状态不能为空",} |
| dictKey |  string  |  当列type属性为select时,可直接配置系统内数据字典key值,如(dictKey: "sys_common_status",)  |



#### uploadConfig 上传按钮配置
~~~js
    //上传配置
    uploadConfig: {
      action: "",
      headers: "",
      accept: "",
    },
~~~
| 配置项  | 参数类型 |                说明                |
| :-----: | :------: | :--------------------------------: |
| action  |  string  |             上传的地址             |
| headers |  string  | 设置上传的请求头部,默认为平台token |
| accept  |  string  |         接受上传的文件类型         |



### 方法
topOperate()
顶部操作按钮方法
~~~js
  //顶部操作按钮方法（data包含顶部过滤数据:formData，选中数据:selectedData,表格列表:table当前点击按钮key:type,根据不同的type可以判断点击的按钮）
    topOperate(data, func) {
      switch (data.type) {
        case "reset":
          break;
        case "search":
          //根据返回的formData过滤条件进行查询
          this.getList(data);
          func("select");
          break;
        default:
          break;
      }
    },
~~~
tableOperate(data)
表格操作按钮方法
~~~js
     //表格操作按钮方法（data包含操作行:row，表格列表:table,当前点击按钮key:type,根据不同的type可以判断点击的按钮，包含更多按钮）
    tableOperate(data) {
      setTimeout(() => {
        switch (data.type) {
          case "delete":
            console.log("父组件删除");
            break;
          case "save":
            console.log(data.row, "父组件保存");
            func("select");
            break;
          default:
            break;
        }
      }, 3000);
    },
~~~
tablePageChange(type,data)
分页切换方法
~~~ js
    //分页切换（data包含顶部过滤数据:formData，以及分页页码，条数数据:queryParams,用于父组件查询）
    tablePageChange(data, func) {
      //异步进行查询分页数据
    },
~~~
onSelectChange(type,data)
表格选中与点击
~~~ js
    //表格选中（data为选中数据,点击即选中都是此方法,data为当前点击或选中行数据）
    onSelectChange(data) {
      console.log(data, "选中父组件");
    },
~~~
tableSubmit(type,data)
弹窗新增方式的弹窗确认按钮
~~~ js
    //弹窗提交方法（data为填写form数据,type为整个组件状态：select:查询状态，add:新增状态，edit:编辑状态）
    //func为弹窗异步关闭方法
    tableSubmit(data, type, func) {
      //异步执行回调，可修改控件状态
      setTimeout(() => {
        //异步请求结束关闭弹窗
        func("select");
      }, 3000);
    },
~~~
tableReset()
表格选中状态重置，及控件formState状态改为'select'
~~~ js
    //多表组合时需要有关联操作时需要重置字表状态，可以使用此方法。
     this.$refs.aTable.tableReset()
~~~
getData()
~~~ js
    //通过refs获取所有table组件数据
     let data =  this.$refs.aTable.getData()
    //  formData:顶部过滤form
    //  selectedData:表格选中项目
    //  state:当前组件状态
    //  table：当前table数据
~~~